import React, { useState, useRef, useEffect } from 'react'
import { Button, Drawer, Space, Checkbox, Form, Input, Tree, message, Popconfirm } from 'antd';
import ComCategoryTree from './ComCategoryTree';
import { addServiceType, updateServiceType } from '../../apis/servicetype';
import { useDispatch } from 'react-redux';
import { getAllService } from '../../redux/category/categoryAction';

type Props = {
  IsUpdate: boolean
  updateData: any
}



const CategoryDrawer = (props: Props, ref: any) => {
  const [open, setOpen] = useState(false);
  const [form] = Form.useForm()
  const [title, setTitle] = useState('')
  const [parentId, setParent] = useState('')
  const [Id, setId] = useState('')
  const dispatch = useDispatch()
  useEffect(() => {
    // console.log(props.IsUpdate);
    if (props.IsUpdate === true) {
      setTitle('修改按钮')
      console.log(props.updateData);
      form.setFieldsValue({
        name: props.updateData.title,
      })
      setParent(props.updateData.parentId)
      setId(props.updateData.id)
    } else {
      setTitle('新增部门')
    }
  }, [props.IsUpdate, props.updateData])
  //父组件打开
  const showDrawer = () => {
    setOpen(true);
  };

  //关闭
  const onClose = () => {
    setOpen(false);
  };

  //提交
  const subBtn = async () => {
    const data = form.getFieldsValue()
    console.log(data);
    if (props.IsUpdate === true) {
      const res = await updateServiceType({
        ...data,
        id: props.updateData.id
      })
      // console.log(res);
      if (res.status === 200) {
        message.success("修改成功！")
        form.setFieldsValue({
          name: '',
        })
        setParent('')
        setId('')
        setOpen(false);
      } else {
        message.error('修改失败！')
      }


    } else {
      const res = await addServiceType(data)
      console.log(res);
      if (res.status === 200) {
        message.success('增加成功！')
        setOpen(false);
        dispatch<any>(getAllService())
      } else {
        message.error('增加失败！')
      }
    }
  }

  //修改树状的值
  const setPid = (val: any) => {
    console.log('setPid', val);
    const Pid = val[val.length - 1]
    //  console.log(Pid);
    form.setFieldsValue({
      Pid: Pid
    })
  }

  React.useImperativeHandle(ref, () => {
    return {
      showDrawer
    }
  })

  const confirm = (e:any) => {
    form.setFieldsValue({
      name: '',
    })
    setParent('')
    setId('')
    setOpen(false);
  };
  
  const cancel = (e:any) => {
    
  };

  return (
    <div>
      <Drawer title={title} placement="right" open={open} size='large' footer={
        <Space>
          <Popconfirm
            title="确定放弃编辑?"
            onConfirm={confirm}
            onCancel={cancel}
            okText="Yes"
            cancelText="No"
          >
            <Button>取消</Button>
          </Popconfirm>
          <Button type="primary" onClick={subBtn}>
            提交
          </Button>
        </Space>
      } closable={false} footerStyle={{ marginLeft: '550px' }}>
        <Form
          name="basic"
          autoComplete="off"
          form={form}
        >
          <Form.Item
            label="部门名称"
            name="name"
            rules={[{ required: true, message: '请输入部门名称!' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="上级部门"
            name="Pid"
          >
            <ComCategoryTree setPid={setPid} parentId={parentId} Id={Id}></ComCategoryTree>
          </Form.Item>

        </Form>
      </Drawer>
    </div>
  )
}

export default React.forwardRef(CategoryDrawer)